body{
    font-family: 'Minecraft Rus';
    background-image: url('https://avatars.mds.yandex.net/i?id=4abfe065bc3f368f87e6312f38c22f6d_l-5234369-images-thumbs&n=13');
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
}



    .phone {
      width:  289px;
      height: 497px;
      background: linear-gradient(135deg, #0a0a0a, #1a1a1a);
      border-radius: 56px;
      border: 12px solid #4caf50;
      box-shadow: 0 0 60px rgba(0,0,0,0.9);
      overflow: hidden;
      position: absolute;
      color: white;
      right: 100px;
      bottom: 0;
    }

    /* статус-бар */
    .status-bar {
      height: 28px;
      background: #000;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 18px;
      font-size: 13px;
      font-weight: 500;
    }

    .status-bar .left  { display: flex; gap: 6px; }
    .status-bar .right { display: flex; align-items: center; gap: 4px; }

    /* заголовок приложения */
    .header {
      height: 54px;
     background-image: url('../assets/images/5e68c8b5-ea07-4722-80e8-7c2614386872.png');
      color: rgb(255, 255, 255);
      font-size: 19px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
    }

    /* иконки */
    .icons {
      flex: 1;
      background-image: url('../assets/images/5e68c8b5-ea07-4722-80e8-7c2614386872.png');
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 20px;
      padding: 36px 24px 80px;
      overflow-y: auto;
    }

    .icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      transition: transform 0.18s ease, filter 0.18s;
      user-select: none;
    }

    .icon:hover {
      transform: scale(1.07);       /* ≈ +7% */
      filter: brightness(1.15);
    }

    .icon img {
      width:  62px;
      height: 62px;
      border-radius: 18px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.5);
      background: rgba(255,255,255,0.12);
      object-fit: cover;
    }


    .icon2 img{
      width:  20px;
      height: 20px;
      border-radius: 18px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.5);
      background: rgba(255,255,255,0.12);
      object-fit: cover;
    }

    .icon3 img{
      width:  30px;
      height: 30px;
      border-radius: 18px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.5);
      background: rgba(255,255,255,0.12);
      object-fit: cover;
    }

    .icon span {
      margin-top: 8px;
      font-size: 13px;
      opacity: 0.92;
      line-height: 1.3;
      max-width: 74px;
      word-wrap: break-word;
    }

    .badge {
      position: absolute;
      top: -4px;
      right: -4px;
      background: #ff3b30;
      color: white;
      font-size: 11px;
      font-weight: bold;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.6);
    }

    /* док */
    .dock {
      position: absolute;
      bottom: 14px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(40,40,60,0.75);
      backdrop-filter: blur(16px);
      border-radius: 24px;
      padding: 10px 20px;
      display: flex;
      gap: 28px;
    }

    .dock .btn {
      width: 38px;
      height: 38px;
      background: rgba(255,255,255,0.18);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: bold;
      cursor: pointer;
    }


    .list{
        left: 20px;
        bottom: 0;
    }