/* Базовая раскладка + липкий футер */
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
  color: #111;
  min-height: 100vh;          /* sticky footer */
  display: flex;
  flex-direction: column;
}

/* Универсальный центрирующий контейнер на 1100px */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 12px;            /* лёгкие боковые отступы */
}

/* ===== STATUS BAR (1100 px, без полноширинной полосы) ===== */
.status_bar {
  height: 40px;
  font-size: 1rem;
  font-family: Arial, sans-serif;
  display: block;
}
.status_bar .container {
  height: 40px;
  display: flex;
  align-items: center;        /* вертикальное центрирование */
  justify-content: space-between;
}
.status_bar a {
  text-decoration: none;
  font-weight: bold;
  color: #404040;
}
.status_bar a:hover {
  text-decoration: underline;
  color: #606060;
}

.status_bar .user {
  font-size: 1rem;
  color: #333;
}

.status_bar .action {
  font-size: 1rem;
  color: #404040;
  text-decoration: none;
  font-weight: bold;
  margin-left: 10px;
}

.status_bar .action:hover {
  text-decoration: underline;
  color: #606060;
}

/* ===== NAV BAR (полоса на всю ширину; контент 1100 px) ===== */
.nav-bar {
  background: #51345F;        /* твой цвет меню */
  /* границы не нужны поверх сплошного фона, но можно оставить при желании */
  /* border-top: 1px solid #eee; */
  /* border-bottom: 1px solid #eee; */
}
nav.nav {
  height: 48px;               /* комфортная высота меню */
  display: flex;
  align-items: center;
  gap: 20px;
}
nav.nav a {
  color: #fff;
  text-decoration: none;
  font-size: 1.1rem;
  font-family: Arial, sans-serif;
}
nav.nav a:hover {
  text-decoration: underline;
}

/* ===== CONTENT (full-width секция; внутри 1100 px зона) ===== */
#content { flex: 1 1 auto; }
.content-area {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 12px 16px;

  /* Если нужен фоновый рисунок только в контенте на 1100px:
  background: url("/assets/bg-bottom.png") no-repeat center bottom;
  background-size: cover;      // или contain
  padding-bottom: 120px;       // чтобы фон не перекрывался футером
  */
}

/* ===== FOOTER BAR (полоса на всю ширину; контент 1100 px) ===== */
.footer-bar {
  background: #51345F;
  border-top: 1px solid #eee;
}

footer.footer {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #555;
  padding: 8px 12px;
}

.card {
	border:1px solid #ccc;
	border-radius:10px;
	padding:12px;
	margin:12px 0
}
.btn {
	padding:8px 14px;
	border:1px solid #999;
	border-radius:8px;
	background:#f8f8f8;
	cursor:pointer
}
.btn.primary{background:#222;color:#fff;border-color:#222}
.grid{display:grid;gap:12px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.qnav{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.qnav button{min-width:38px;padding:6px;border-radius:6px;border:1px solid #ccc}
.qnav .answered{background:#d9fbd0}
.qnav .flagged{outline:2px solid #f90}
.timer{position:sticky;top:10px;background:#fff;padding:6px 10px;border:1px solid #ddd;border-radius:8px;float:right}
th.status, td.status { min-width: 130px; text-align:center; }
.right   { color: #178b17; font-weight: 600; }
.wrong   { color: #b00020; font-weight: 600; }
.note    { color: #555; font-size: .95em; }
.sol     { background:#f5f5f5; padding:12px 16px; border-radius:8px; margin-top:10px; }
ul.clean { list-style: none; padding-left: 1.1em; }
ul.clean li { margin: 4px 0; }

  :root{ --bd:#e6e6e6; --mut:#555; --ok:#1a7f37; --err:#c00; --neut:#666; }
  *{box-sizing:border-box}
  table{width:100%;border-collapse:collapse}
  th,td{padding:8px;border-bottom:1px solid #eee;text-align:left;vertical-align:middle}
  td.num, th.num{text-align:right}
  .small{color:var(--mut);font-size:12px}
  .badge{padding:2px 8px;border-radius:999px;border:1px solid #ddd;font-size:12px;display:inline-block}
  .badge.ok{color:var(--ok);border-color:var(--ok)}
  .badge.err{color:var(--err);border-color:var(--err)}
  .badge.neut{color:var(--neut);border-color:var(--neut)}
  a.session-link{text-decoration:none;color:#0077cc;font-weight:600}
  a.session-link:hover{text-decoration:underline}

  .toolbar{display:flex;gap:8px;align-items:center;margin:6px 0 10px;flex-wrap:wrap}
  .seg{display:inline-flex;border:1px solid var(--bd);border-radius:8px;overflow:hidden}
  .seg a{padding:6px 10px;text-decoration:none;color:#111;border-right:1px solid var(--bd)}
  .seg a:last-child{border-right:0}
  .seg a.active{color:#0077cc}

  /* Sessions responsive columns */
  .sessions.compact table .col-mode,
  .sessions.compact table .col-finish,
  .sessions.compact table .col-corr,
  .sessions.compact table .col-items { display:none; }

  @media (max-width: 900px){
    .sessions table .col-mode,
    .sessions table .col-finish,
    .sessions table .col-corr { display:none; }
  }
  @media (max-width: 640px){
    .sessions table .col-items { display:none; }
    .sessions table .col-min { white-space:nowrap; }
    .sessions table .col-start { white-space:nowrap; }
  }
  @media (max-width: 420px){
    .sessions table .col-ans { display:none; }
  }

  th, td { font-size:14px }
  @media (max-width:480px){
    th, td { font-size:13px; padding:6px }
  }

  .btn{border:1px solid var(--bd);background:#fff;border-radius:8px;padding:6px 10px;font-size:14px;cursor:pointer}
  .danger{border-color:#ffb3b3;color:#b30000}
  
  
.contact-form { display: grid; gap: 14px; max-width: 720px; }
.contact-form .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form label span { display:block; margin-bottom:6px; font-weight:600; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="url"],
.contact-form textarea,
.contact-form select {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid #ccc; border-radius: 6px; font-size: 1rem; font-family: inherit;
}
.contact-form button {
  padding: 10px 18px; border: 0; border-radius: 8px;
  background:#51345F; color:#fff; font-weight:600; cursor:pointer;
}
.contact-form .hp { position:absolute; left:-9999px; top:auto; width:1px; height:1px; } /* honeypot */

.alert { padding: 10px 12px; border-radius: 6px; margin: 12px 0; }
.alert.success { background:#e7f8ee; color:#126236; border:1px solid #c7ecd4; }
.alert.error   { background:#fdeeee; color:#8a1f1f; border:1px solid #f3c5c5; }

ul.links { list-style: none; padding:0; }
ul.links li { margin: 6px 0; }

@media (max-width: 680px) {
  .contact-form .grid { grid-template-columns: 1fr; }
}