*{ box-sizing:border-box; margin:0; padding:0; } body{ font-family:'Inter',sans-serif; background:linear-gradient(135deg,#1e1b4b,#312e81,#be185d); display:flex; justify-content:center; align-items:center; min-height:100vh; color:white; overflow-x:hidden; } /* ================= ФОН ================= */ #particles,#confetti{ position:fixed; inset:0; z-index:-1; pointer-events:none; } /* ================= СТАРТОВЫЙ ЭКРАН ================= */ .start-screen{ text-align:center; animation:fadeIn 1s ease; } .start-screen h1{ font-size:48px; background:linear-gradient(90deg,#60a5fa,#f472b6); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:20px; } .start-screen p{ opacity:0.8; margin-bottom:20px; } /* ================= КНОПКИ ================= */ button{ padding:12px 30px; border-radius:40px; border:none; background:linear-gradient(90deg,#3b82f6,#ec4899); color:white; cursor:pointer; font-weight:600; transition:0.3s ease; box-shadow:0 5px 20px rgba(236,72,153,0.4); } button:hover{ transform:translateY(-3px); box-shadow:0 10px 30px rgba(236,72,153,0.6); } button:disabled{ opacity:0.5; cursor:not-allowed; box-shadow:none; transform:none; } /* ================= МОДАЛЬНОЕ ОКНО ================= */ .modal{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); justify-content:center; align-items:center; padding:20px; } .modal-content{ width:100%; max-width:750px; padding:40px; border-radius:25px; background:rgba(255,255,255,0.08); backdrop-filter:blur(25px); box-shadow:0 20px 60px rgba(0,0,0,0.5); animation:scaleIn 0.5s ease; } /* ================= ПРОГРЕСС ================= */ .progress{ height:10px; background:rgba(255,255,255,0.15); border-radius:20px; margin-bottom:15px; overflow:hidden; } #progressBar{ height:100%; width:0; background:linear-gradient(90deg,#60a5fa,#f472b6); transition:0.4s ease; } /* ================= ВОПРОСЫ ================= */ .question{ display:none; animation:fadeIn 0.5s ease; } .question.active{ display:block; } label{ display:block; margin:10px 0; padding:12px; background:rgba(255,255,255,0.1); border-radius:12px; cursor:pointer; transition:0.3s ease; } label:hover{ background:rgba(255,255,255,0.2); transform:translateX(5px); } input[type="radio"]{ margin-right:10px; } input[type="text"]{ width:100%; padding:12px; border-radius:12px; border:none; margin-bottom:15px; outline:none; background:rgba(255,255,255,0.15); color:white; } input[type="text"]:focus{ background:rgba(255,255,255,0.25); } /* ================= НАВИГАЦИЯ ================= */ .nav-buttons{ display:flex; justify-content:space-between; margin-top:20px; } /* ================= РЕЗУЛЬТАТ ================= */ .result-card{ background:rgba(255,255,255,0.08); backdrop-filter:blur(25px); padding:50px; border-radius:30px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.5); max-width:750px; width:95%; animation:scaleIn 0.6s ease; } .result-card h1{ margin-bottom:20px; background:linear-gradient(90deg,#60a5fa,#f472b6); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } .score-circle{ width:170px; height:170px; margin:25px auto; border-radius:50%; display:flex; justify-content:center; align-items:center; font-size:34px; font-weight:700; background:linear-gradient(135deg,#3b82f6,#ec4899); box-shadow:0 0 50px rgba(236,72,153,0.8); animation:pulse 2s infinite; } .result-details{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin:30px 0; } .detail-box{ flex:1; min-width:150px; background:rgba(255,255,255,0.1); padding:20px; border-radius:18px; transition:0.3s; } .detail-box:hover{ background:rgba(255,255,255,0.2); transform:translateY(-5px); } .result-card a{ display:inline-block; margin:10px; padding:12px 30px; border-radius:30px; background:linear-gradient(90deg,#3b82f6,#ec4899); color:white; text-decoration:none; font-weight:600; transition:0.3s; } .result-card a:hover{ transform:translateY(-3px); box-shadow:0 10px 25px rgba(236,72,153,0.6); } /* ================= АНИМАЦИИ ================= */ @keyframes fadeIn{ from{opacity:0} to{opacity:1} } @keyframes scaleIn{ from{transform:scale(0.8);opacity:0} to{transform:scale(1);opacity:1} } @keyframes pulse{ 0%{box-shadow:0 0 30px rgba(236,72,153,0.5);} 50%{box-shadow:0 0 60px rgba(236,72,153,1);} 100%{box-shadow:0 0 30px rgba(236,72,153,0.5);} } /* ================= АДАПТИВ ================= */ @media(max-width:768px){ .modal-content{ padding:25px; } .result-card{ padding:30px; } .score-circle{ width:130px; height:130px; font-size:24px; } .result-details{ flex-direction:column; } button{ width:100%; margin-bottom:10px; } } .login-btn{ padding:10px 20px; background:#ec4899; border-radius:20px; text-decoration:none; color:white; } .container{ width:90%; max-width:1000px; margin:50px auto; } .create-btn{ display:inline-block; margin-bottom:20px; padding:10px 20px; background:#3b82f6; border-radius:20px; text-decoration:none; color:white; } table{ width:100%; border-collapse:collapse; background:rgba(255,255,255,0.1); } th,td{ padding:15px; text-align:center; } .start-btn{ background:#3b82f6; padding:6px 15px; border-radius:15px; color:white; text-decoration:none; } .edit-btn{color:#60a5fa} .delete-btn{color:#ff4d6d}

.start-buttons{
margin-top:25px;
display:flex;
flex-direction:column;
gap:12px;
align-items:center;
}

.menu-btn{
display:inline-block;
padding:12px 28px;
border-radius:40px;
background:linear-gradient(90deg,#3b82f6,#ec4899);
color:white;
text-decoration:none;
font-weight:600;
box-shadow:0 5px 20px rgba(236,72,153,0.4);
transition:0.3s;
}

.menu-btn:hover{
transform:translateY(-3px);
box-shadow:0 10px 30px rgba(236,72,153,0.7);
}

.admin-btn{
background:linear-gradient(90deg,#6366f1,#9333ea);
}