body {
  margin:0;
  font-family:Arial,sans-serif;
  background:#008000;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
  text-align:center;
}

/* Шапка */
#topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:95%;
  max-width:1200px;
  padding:10px 20px;
}
.header-left {
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.logo-placeholder {
  width:50px;
  height:50px;
  background:#00374A;
  border-radius:8px;
}
.project-block { text-align:left; }
.project-name { font-size:32px; font-weight:bold; }
.slogan { font-size:18px; margin-top:0; margin-left:2px; }

.header-right nav a {
  color:#fff;
  margin-left:20px;
  text-decoration:none;
  font-weight:bold;
  font-size:16px;
}
.header-right nav a:hover { text-decoration:underline; }

#separator { width:95%; max-width:1200px; height:1px; background:#fff; margin-bottom:20px; }

#main-screen h2 { margin-bottom:20px; }

#reg-form { display:flex; gap:10px; justify-content:center; margin-bottom:10px; }
#reg-form input, #reg-form button {
  padding:10px; font-size:16px; border-radius:5px; border:2px solid #fff; background:#00374A; color:#fff;
}
#reg-form input:focus { outline:none; }
#reg-msg-container { display:flex; flex-direction:column; align-items:center; }
#reg-msg { font-weight:bold; color:#ff0; margin-top:10px; text-align:center; }
#start-btn { padding:10px 20px; font-size:18px; font-weight:bold; background:#00374A; border:2px solid #fff; border-radius:5px; color:#fff; cursor:not-allowed; margin-top:10px; }

#test-container { display:none; flex-direction:column; align-items:center; width:100%; }
#question-section { margin-top:50px; }
#question-line { display:flex; align-items:center; gap:12px; justify-content:center; }
#question-counter { font-size:15px; font-weight:bold; background:#00374A; color:#fff; border:2px solid #fff; border-radius:6px; padding:3px 8px; }
#question { font-size:22px; color:#fff; max-width:900px; }

#answers { display:flex; flex-direction:column; gap:10px; width:300px; margin-top:20px; }
.answer { padding:10px 20px; font-size:18px; background:#00374A; color:#fff; border:2px solid #fff; border-radius:5px; cursor:pointer; text-align:left; }
.answer:hover { background:#005C7A; }
.answer.correct{ outline:3px solid #00e676; background:#004f60; }
.answer.wrong{ outline:3px solid #ff5252; background:#003740; }

#bottom-bar { display:flex; gap:12px; margin-top:30px; width:300px; justify-content:center; }
.timer-btn, #next-btn { flex:1; height:45px; background:#fff; border:2px solid #00374A; border-radius:8px; color:#00374A; font-size:16px; font-weight:bold; text-align:center; line-height:41px; cursor:pointer; }
.timer-btn.expired { color:red; }
#next-btn:disabled { opacity:0.6; cursor:not-allowed; }

#progress { margin-top:15px; color:white; font-size:16px; }

#results-container { display:none; margin-top:30px; width:95%; max-width:900px; }
#results-table { border-collapse: collapse; width:100%; }
#results-table th, #results-table td {
  border:1px solid #00374A;
  padding:6px 10px;
  text-align:center;
  background:#00374A;
  color:#fff;
}
#results-table th { font-weight:bold; }

#copy-code-btn {
  background:#ff9800;
  border:none;
  padding:5px 15px;
  border-radius:5px;
  font-weight:bold;
  color:#00374A;
  cursor:pointer;
  margin-left:10px;
}
#copy-code-btn:hover { background:#ffc107; }