:root{
    --bg: #f7f6f8;
    --card: #ffffff;
    --muted: #9aa0a6;
    --shadow: 0 8px 20px rgba(18,20,24,0.06);
    --radius: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  }
  
  html,body{height:100%;}
  body{
    margin:0;
    background: #87CEEB;
    color:#111827;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    padding:28px;
    box-sizing:border-box;
  }
  
  .container{
    max-width:420px;
    margin:0 auto;
  }
  
  
  .card{
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  
  .item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 12px;
    border-radius:12px;
    cursor:pointer;
    transition:background .12s ease, transform .06s ease;
  }

.item img{
  width: 36px;
  height: 36px;
}
  
  .item:hover{background:#f4f7fb; transform:translateY(-1px);}
  
  .icon{
    font-size:18px;
    flex-shrink:0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .text{
    flex:1;
    font-size:15px;
  }
  
  .arrow{
    font-size:20px;
    color:#c0c0c0;
  }
  


.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: white;
    border-top: 1px solid #000000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
    transition: all 0.5s;
  }
  
  .footer-item {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    color: #000;
    cursor: pointer;
    padding: 5px 5vw;
    text-decoration: none;
  }
  
  .footer-item img {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
  }

  .icon{
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
  }
  
  
  .footer.active{
    bottom: 0;
  }


  .footer-item.checked{
    background-color: #007bff;
  }

  .clouds {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url('../static/images/main.jpg') repeat-x;
    background-size: cover;
    z-index: -1; /* отправляем назад, под основной контент */
    animation: moveClouds 60s linear infinite;
  }
  
  @keyframes moveClouds {
    from { background-position-x: 0; }
    to { background-position-x: -1000px; }
  }


  .section-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    align-items: center;
    gap: 10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
                 Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-size: 16px;
    color: #000;
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:12px;
  }
  
  .section-title img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
  }
  

.profile{
  gap: 3vw;
  display: flex;
  align-items: center;
}


.profile {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-text {
  display: flex;
  flex-direction: column;
}

.role-text {
  margin-top: 2px;
  font-size: 12px;
  color: #8b949e; /* красивый мягкий серый */
}


.badges {
  display: flex;
  align-items: center;
  gap: 6px;
}

.limit-badge, .commission-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #eef3ff;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  color: #333;
  white-space: nowrap;
}

.limit-badge.individual {
  background: #fff4d6;
}

.gear {
  cursor: pointer;
  display:flex;
  align-items:center;
}


.badges {
  display: flex;
  align-items: center;
  gap: 10px;
}

.badge-column {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.badge-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #eef3ff;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
}

.badge-gear {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.badge-text {
  font-size: 12px;
  color: #333;
}


.cogwheel{
  width:26px;
  height:26px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}