body {
  background: #191b1f;
  color: #fff;
  font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

.outer-bg {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: #191b1f;
}

.content-container {
  width: 100vw;
  max-width: 398px;
  height: 1400px;       /* Теперь ВСЕГДА ровно 1400px */
  margin: 0 auto;
  box-sizing: border-box;
  overflow: auto;
}


.logo-top {
  text-align: center;
  margin: 36px 0 26px 0;
}

.main-logo {
  width: 144px;
  height: auto;
  border-radius: 15px;
}

.menu-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  width: 100%;
  margin-bottom: 22px;
}

.btn-menu {
  width: 100%;
  min-width: 0;
  padding: 5px 0;
  font-size: 24px;
  font-weight: 700;
  color: #008cf0;
  background: transparent;
  border: 3px solid #223b54; /*рамки в меню*/
  border-radius: 15px;
  text-align: center;
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
  cursor: pointer;
  margin: 0;
  box-sizing: border-box;
  display: block;
  outline: none;
}

.btn-menu:hover,
.btn-menu:focus {
  background: #448aff;
  color: #fff;
}

.content-block {
  width: 100%;
  max-width: 398px;
  margin: 0 auto;
  padding: 0 0;
  box-sizing: border-box;
}


/*Настройка таблицы внешний вид*/



.excel-table {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 32px 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.excel-group-parent {
 background: #305478 !important; /* Темно Серый */
  color: #fff !important;
  font-weight: 600;
}

.excel-group-child {
  background: #4e586e !important; /* Чёрный — теперь видимый! */
  color: #fff !important;
  font-weight: 600;
}

.excel-table th:first-child,
.excel-table td:first-child {
    width: 260px;         /* Ширина первого столбца */
    text-align: left;     /* Выравнивание для первого столбца */
}

.excel-table th:not(:first-child),
.excel-table td:not(:first-child) {
    text-align: right;   /* Остальные — по центру */
}

.excel-table th,
.excel-table td {
  word-break: break-word;
  white-space: pre-line;
  padding: 5px 5px;
  border: 1.0px solid #eef5ff;
  color: #fff;
  /*background: #23272ed;*/
  font-size: 14px;
  text-align: center;
}

.excel-table th {
  /* background: #1a1d23;*/
 color: #338cff;
  font-size: 14px;
  font-weight:  bold;
}


.excel-highlight-first {
  background: #223b54 !important;
  color: #fff !important;
}

.excel-highlight-last {
  background: #223b54 !important;
  color: #181818 !important;
}

.form-card {
  background: #202227;
  border-radius: 18px;
  padding: 36px 16px 28px 16px;
  max-width: 398px;
  margin: 20px auto;
  box-shadow: 0 4px 12px rgba(24,30,40,0.13);
}

input[type="text"], input[type="password"], select {
  width: 100%;
  font-size: 18px;
  padding: 11px;
  border: 2px solid #338cff;
  border-radius: 8px;
  background: #16181c;
  color: #fff;
  margin-bottom: 14px;
  box-sizing: border-box;

}

input[type="checkbox"] {
  accent-color: #338cff;
}

label {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 3px;
  display: block;
  color: #bdd7ff;
}

.flashes {
  max-width: 398px;
  margin: 22px auto 0 auto;
  text-align: center;
}
.flashes > div {
  background: #343952;
  color: #ffba6a;
  border-radius: 8px;
  font-size: 17px;
  padding: 12px 10px;
  margin-bottom: 6px;
}

.footer {
  text-align: center;
  font-size: 16px;
  color: #4884ff88;
  padding: 30px 0 14px 0;
  margin-top: 46px;
  max-width: 398px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 420px) {
  .content-container,
  .content-block,
  .excel-table,
  .form-card,
  .footer {
    max-width: 100vw;
  }
  .btn-menu {
    font-size: 19px;
    padding: 17px 0;
    border-radius: 13px;
  }
  .main-logo {
    width: 99px;
  }
}

::-webkit-scrollbar {
  width: 7px;
  background: #22273d;
}
::-webkit-scrollbar-thumb {
  background: #338cff;
  border-radius: 6px;
}

a[href^="tel"] {
    color: inherit !important;
    text-decoration: none !important;
    pointer-events: none !important;
    cursor: default !important;
}

.animated-table {
  opacity: 0;
  transform: translateY(32px) scale(0.97);
  animation: table-fade-in 0.7s cubic-bezier(.37,.01,.47,1.01) 0.1s forwards;
}

@keyframes table-fade-in {
  from {
    opacity: 0;
    transform: translateY(32px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.menu-container .btn-menu {
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  animation: btn-fade-in 0.6s cubic-bezier(.33,.13,.65,1.01) forwards;
  animation-delay: var(--btn-delay, 0s);
}

@keyframes btn-fade-in {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}